ProgrammingNode js

Multer를 이용한 파일 올리기

Node js

Multer를 이용한 파일 올리기

프로젝트 모듈에 multer를 추가한다.

1
npm install --save multer

Node의 해당 프로젝트로 이동하여 위의 명령어를 입력하고 multer 모듈을 설치한다.

2. 서버의 요청에 사용할 Api를 만든다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
var express = require('express');
var multer = require('multer');
var router = express.Router();
var path = require('path');

const upload = multer({

storage : multer.diskStorage({
        destination: function(req,file,cb)
        {
                cb(null,'../../static/images/');
        },
        filename: function(req,file,cb)
        {
                cb(null,new Date().valueOf() + path.extname(file.originalname));
        }
}),
});

router.post('/up',upload.single('img'),function(req,res,err)
{
        var originalPath = 'yourUrl/images/';
        var filename = originalPath + req.file.filename;
        res.status(200).json({ result : 'success', path : filename });
});

서버로 요청할 api를 만들어 받은 요청에 대해 multer를 이용하여 이미지를 저장하고 저장된 경로를 반환 해주도록 한다.

라우터에 post 방식으로 up이라는 요청이 들어왔을 경우 upload.single()에 의해 하나의 파일만 받아 저장하게 된다. 여러개를 저장할 경우 upload.array()를 통해 받을 수 있다, 또한 필드명 별로 여러개의 사진을 받을 경우 .fields 메서드를 이용한다.

가능한 방식

cont upload에는 multer가 저장할 저장 위치를 정해준다. 위에서 multer가 저장할 저장 위치와 파일명에 대해서 명시적으로 지정해주는 것은 multer에 의해 확장자가 자동으로 제거된 이름으로 명명되는 것을 임의로 설정해 주는 것이다.

1
const upload = multer({dest : 'images'});

만약 multer의 파라미터에 간단하게 dest만 넣어주게 되면 multer를 통해 저장된 파일의 이름이 0ax5e4f725… 과같은 문자로 바뀌어 반환되게 된다. 또한 확장자 까지 제거된 상태로 파일이 저장되므로 static 서버에 저장한뒤 단순히 자원의 이름으로만 접근하게 되면 이미지 파일이 바로 보이지 않고 확장자 없는 파일이 다운된다.

3. Client에서의 요청

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$.ajax(
{
				url : uploadURL,
                type : "POST",
                contentType : false,
                processData : false,
                cache : false,
                data : formData,
                success: function(data)
                {
                    status.setUrlName(data.path);
                    console.log(data);
                },
                error:function(request, status, error)
                {
                    console.log(error);
                }


       }
 );

Client에서의 요청은 위와 같이 ajax를 이용해 요청 하였다. 서버에서의 방식과 마찬가지로 POST로 맞춰주고 data: 항목에는 전송할 데이터 파일의 form형 데이터를 넣는다.

1
2
var formData = new FormData();
fd.append('img', 파일 객체);

formData는 위와 같이 formData에 필드명과 함께 파일객체를 넣어주어 ajax로 요청하게 된다. 이와 같은 작업을 같은 도메인 내에서 한다면 문제가 발생하지 않지만 원격으로 떨어진 서버로 요청을 보내게 될 경우 Same-Origin Policy 문제가 발생한다.

Cross-Domain 문제는 ajax의 요청을 같은 도메인이 아닌 다른 도메인을 가진 서버로 요청을 보내는 경우에 제약이 걸리는 것이다. (보안적인 문제를 위해 막았다고 한다.)

위 문제에 대해 Jsonp를 이용해 해결할 수 있는데 Jsonp는 script 요소로 요청되는 호출이 보안 정책에 적용되지 않는점을 이용한 것이라고 한다.

서버측에서 해결하는 방법으로는 서버측에서 Cross Domain을 허용해 주면 된다. -> Node js에서는 cors 모듈을 통해 아주 간단하게 해결 할 수 있다.

1
npm install --save cors

모듈을 설치하고

1
2
3
4
5
6
var cors = require('cors');

...


app.use(cors());

를 해주면 문제가 해결된다. 웹 쪽 클라이언트를 많이 다루어 보지 않았지만 웹에서는 이러한 문제가 발생할 수 있다는 것을 알고 넘어가도록 해야겠다.

공유하기